<template>
  <div class="addCus">
    <h2>客服管理</h2>
    <div class="operatingBox">
      <div class="operating">
        <el-button
          type="info"
          icon="el-icon-arrow-left"
          size="small"
          @click="getBack"
          >返回</el-button
        >
      </div>
    </div>
    <div class="formBox">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">类型</span>
            </label>
            <el-select
              v-model="newData.type"
              class="form-control select2"
              placeholder="请选择用户状态"
            >
              <el-option label="售后" value="0"></el-option>
              <el-option label="投诉" value="1"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">状态</span>
            </label>
            <el-select v-model="newData.status" class="form-control select2">
              <el-option label="新客服" value="0"></el-option>
              <el-option label="处理中" value="1"></el-option>
              <el-option label="已处理" value="2"></el-option>
              <el-option label="已取消" value="3"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">客服编号</span>
            </label>
            <el-input
              v-model="newData.number"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">标题</span>
            </label>
            <el-input
              v-model="newData.title"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">服务方式</span>
            </label>
            <el-select v-model="newData.mode" class="form-control select2">
              <el-option label="电话" value="0"></el-option>
              <el-option label="传真" value="1"></el-option>
              <el-option label="邮寄" value="2"></el-option>
              <el-option label="上门" value="3"></el-option>
              <el-option label="其他" value="4"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">来源</span>
            </label>
            <el-input
              v-model="newData.source"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">服务日期</span>
            </label>
            <div>
              <el-date-picker
                v-model="newData.date"
                type="datetime"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">客户</span>
            </label>
            <el-input v-model="newData.patientName" readonly>
              <el-button type="success" slot="suffix" id="searchButton"
                >查找</el-button
              >
            </el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">客户反馈</span>
            </label>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="newData.feedback"
            >
            </el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <label>
              <span class="text">服务内容</span>
            </label>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="newData.content"
            >
            </el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bothBtn">
      <el-button type="primary" @click="updateInfo">保存</el-button>
      <el-button type="info" plain @click="recoverInfo">取消</el-button>
    </div>
  </div>
</template>
<script>
import { changeCusInfo } from "@/api/customer";
import dayjs from "dayjs";
export default {
  name: "addCustomer",
  data() {
    return {
      patientName: "",
      patientData: {}, //患者查询数据,
      dialogTableVisible: false,
      updateData: {},
      newData: {
        content: "", //服务内容
        createTime: "",
        creator: "盖茨",
        date: "", //日期
        description: "",
        feedback: "", //服务反馈
        id: 0, //标识
        mode: 1, //服务方式
        number: "", //客服编号
        // patientName: 1, //客户
        source: "", //来源
        status: 0, //状态
        title: "", //标题
        type: 0, //类型
        updateTime: "2023-02-21T09:43:08.568Z",
      },
      clientText: "",
      value10: "",
      input: "",
      value: "",
    };
  },
  created() {
    this.newData.type = 1;
    this.newData.status = 1;
    //修改传参
    this.newData.type = this.$route.query.type;
    this.newData.title = this.$route.query.title;
    this.newData.status = this.$route.query.status;
    this.newData.number = this.$route.query.number;
    this.newData.mode = this.$route.query.mode;
    this.newData.source = this.$route.query.source;
    this.newData.date = this.$route.query.date;
    this.newData.feedback = this.$route.query.feedback;
    this.newData.patientName = this.$route.query.patientName;
    this.newData.content = this.$route.query.content;
    this.newData.id = this.$route.query.id;
  },
  methods: {
    dayjs,
    //保存修改
    updateInfo() {
      this.newData.date = dayjs(this.newData.date).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.changeCusInformation(this.newData);
    },
    //修改接口----------------------------------
    async changeCusInformation(customer) {
      let res = await changeCusInfo(customer);
      console.log("修改接口-----------", res);
      if (res.data.code === 200) {
        // console.log(this.updateData);

        this.$message({
          type: "success",
          message: "修改成功!",
        });
        this.$router.push("/customer/cusManage");
      }
    },
    //取消--------------------------------------
    recoverInfo() {
      //取消修改
      this.newData.type = this.$route.query.type;
      this.newData.title = this.$route.query.title;
      this.newData.status = this.$route.query.status;
      this.newData.number = this.$route.query.number;
      this.newData.mode = this.$route.query.mode;
      this.newData.source = this.$route.query.source;
      this.newData.date = this.$route.query.date;
      this.newData.feedback = this.$route.query.feedback;
      this.newData.patientName = this.$route.query.patientName;
      this.newData.content = this.$route.query.content;
      this.newData.id = this.$route.query.id;
    },
    //返回-----------------------------------
    getBack() {
      this.$router.push("/customer/cusManage");
    },
  },
};
</script>
<style lang="less" scoped>
h2 {
  padding: 15px;
}
.operatingBox {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}
.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}
.el-button {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: 700;
  font-size: 100%;
  padding: 6px;
  border-radius: 0.25em;
}
.formBox,
.bothBtn {
  margin-left: 10px;
  margin-right: 10px;
  background-color: #fff;
  padding: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.col-md-6 {
  width: 50%;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}
.form-control {
  border-radius: 0;
  box-shadow: none;
  border-color: #d2d6de;
}
.form-control {
  display: block;
  width: 100%;
}
.text {
  font-size: 15px;
}
.grid-content {
  margin-top: 20px;
}

/* 日期选择框的宽度 */
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
#searchButton {
  margin-top: 6px;
}
.addCus {
  padding-bottom: 20px;
}
</style>
